<template>
  <view class="goods-detail" v-if="goods">
    <!-- 轮播图 开始 -->
    <u-swiper
      :list="goods.pics"
      name="pics_big"
      height="750"
      @click="handlePreviewImage"
    ></u-swiper>
    <!-- 轮播图 结束 -->

    <!-- 价格 开始 -->
    <view class="goods-price">￥{{ goods.goods_price }}</view>
    <!-- 价格 结束 -->

    <!-- 名称 开始 -->
    <view class="goods-name">{{ goods.goods_name }}</view>
    <!-- 名称 结束 -->

    <!-- 图文内容 开始 -->
    <view class="info">
      <view class="info-title">/ 图文详情 /</view>
      <!-- 商品详情 -->

      <!-- 富文本编译 rich-text 适合做简单一些的渲染 -->
      <!-- 复杂的渲染建议 u-parse -->
      <u-parse :html="goods.goods_introduce"></u-parse>
    </view>
    <!-- 图文内容 结束 -->

    <!-- 购物订单 开始 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <view class="item">
          <u-icon
            name="home"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">店铺</view>
        </view>
        <navigator
          url="/pages/cart/cart"
          open-type="switchTab"
          class="item car"
        >
          <u-badge
            class="car-num"
            :count="allCount"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="handleInCart">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
    <!-- 购物订单 结束 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods: null,
    };
  },
  async onLoad({ id }) {
    const res = await this.$u.get("/goods/detail", { goods_id: id });
    console.log(res);
    this.goods = res.message;
  },
  methods: {
    // 点击轮播图 放大预览
    handlePreviewImage(index) {
      const urls = this.goods.pics.map((v) => v.pics_big);
      // 获取被点击的图片的路径
      const current = urls[index];
      uni.previewImage({ urls, current });
    },
    // 点击购物车
    handleInCart() {
      // 判断当前商品有没有被添加过 findIndex
      const index = this.$store.state.cartList.findIndex(
        (goods) => goods.goods_id === this.goods.goods_id
      );
      // 先获取出来 数组
      const cartList = this.$store.state.cartList;
      if (index === -1) {
        // 没有找到，添加   不能直接修改 vuex中的数据  commit
        cartList.push({ ...this.goods, checkd: true, count: 1 });
      } else {
        // 找到了，商品数量递增
        cartList[index].count++;
      }
      this.$store.commit("setCartList", cartList);
    },
  },
  computed: {
    // 购物车总数
    allCount() {
      let count = 0;
      this.$store.state.cartList.forEach((goods) => {
        if (goods.checkd) {
          count += goods.count;
        }
      });
      return count;
    },
  },
};
</script>

<style>
.goods-detail {
  padding-bottom: 102rpx;
}
.goods-price {
  color: #e03440;
}
.info .info-title {
  font-size: 70rpx;
  margin: 40rpx 0 40rpx 0;
  text-align: center;
}
.navigation {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
}
.left {
  display: flex;
  font-size: 20rpx;
}
.item {
  margin: 0 30rpx;
}
.car {
  text-align: center;
  position: relative;
}
.car-num {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
}

.right {
  display: flex;
  font-size: 28rpx;
  align-items: center;
}
.btn {
  line-height: 66rpx;
  padding: 0 30rpx;
  border-radius: 36rpx;
  color: #ffffff;
}
.cart {
  background-color: #ed3f14;
  margin-right: 30rpx;
}
.buy {
  background-color: #ff7900;
}
</style>
